<template>
  <div class="searchView">
    <div class="search-content-box">
      <el-input v-model="filterText" placeholder="输入小区、摄像机名称" prefix-icon="el-icon-search" clearable>
      </el-input>
      <el-tree
        class="filter-tree"
        :data="data"
        :props="defaultProps"
        node-key="id"
        :default-expanded-keys="[6]"
        :default-checked-keys="[10]"
        :filter-node-method="filterNode"
        ref="tree"
      >
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <SvgIcon v-if="data.className.length > 0" :icon-class="data.className" class="img-box" />
          <span>{{ node.label }}</span>
        </div>
      </el-tree>
    </div>
    <div class="search-btn-box">
      <div>
        <el-button icon="el-icon-refresh" round>重置</el-button>
        <el-button icon="el-icon-search" round>搜索</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      filterText: "",
      data: [
        {
          id: 1,
          label: "小区1",
          className: "",
          children: [
            {
              id: 7,
              label: "二级 1-1",
              className: "tree-camera"
            }
          ]
        },
        {
          id: 2,
          label: "小区12",
          className: "",
          children: [
            {
              id: 8,
              label: "二级 2-1",
              className: "tree-camera"
            }
          ]
        },
        {
          id: 3,
          label: "小区112",
          className: ""
        },
        {
          id: 4,
          label: "小区134",
          className: "",
          children: [
            {
              id: 9,
              label: "二级 2-1",
              className: "tree-camera"
            }
          ]
        },
        {
          id: 5,
          label: "小区1235",
          className: ""
        },
        {
          id: 6,
          label: "银城小区",
          className: "",
          children: [
            {
              id: 10,
              label: "一栋二单元",
              className: "tree-camera"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    }
  },
  mounted() {},
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>

<style scoped lang="scss">
.searchView {
  width: 380px;
  height: 551px;
  background-image: url("/public/panoramicData/search-bg-icon.png");
  background-position-x: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-sizing: border-box;
  padding: 30px 15px 0;
  .search-content-box {
    height: 405px;
    border-radius: 4px;
    background: #0f2b3f;
    box-sizing: border-box;
    padding: 15px;
    .filter-tree {
      margin-top: 15px;
    }
  }
  .search-btn-box {
    width: 380px;
    height: 110px;
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    .el-button {
      color: #01c2ff;
      background: rgba(10, 26, 52, 0.6);
      border: 1px solid rgba(89, 175, 249, 0.7049);
      box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.6513);
    }
  }
}
.custom-tree-node {
  display: flex;
  align-items: center;
}
.img-box {
  margin-right: 10px;
}

::v-deep {
  .el-input__inner {
    background: #060c16;
    // 设置输入字体的颜色
    color: #fff;
    border: none;
    &:placeholder {
      color: #366fae;
    }
  }
  .el-tree {
    background-color: #0f2b3f; //背景色
    color: #a8d6ff;
    font-size: 14px;
  }
  .el-tree-node__content {
    &:hover {
      background: rgba(6, 12, 22, 0.5);
    }
  }
  .el-tree-node:focus > .el-tree-node__content,
  .el-tree-node:checked > .el-tree-node__content {
    background-color: rgba(6, 12, 22, 0.5); //背景色
    color: #01c2ff;
  }
  // .el-tree .el-tree-node__expand-icon.expanded {
  //   -webkit-transform: rotate(0deg);
  //   transform: rotate(0deg);
  // }
  // /* //有子节点 且未展开 */
  .el-tree .el-icon-caret-right:before {
    background-image: url("/public/panoramicData/tree-right-icon.png");
    // background: url("/public/panoramicData/tree-right-icon.png") no-repeat 0 3px;
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
  }

  // /* //有子节点 且已展开 */
  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    // background: url("/public/panoramicData/tree-right-icon.png") no-repeat 0 3px;
    background-image: url("/public/panoramicData/tree-right-icon.png");
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
  }

  // /* //没有子节点 */
  .el-tree .el-tree-node__expand-icon.is-leaf::before {
    background: #fff;
    content: "";
    display: block;
    width: 0px;
    height: 0px;
  }

  // //高亮字体颜色
  // .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  //   color: #409eff !important;
  // }
}
</style>
